<template>
  <div class="movie-detail-container">
    <!--电影信息-->
    <div class="movie-info">
      <div class="left-info">
        <span class="name">{{ movieData.vod_name }}</span>
        <span class="en">{{ movieData.vod_en }}</span>
        <!--标签-->
        <div class="tag">
          <div class="item-tag">
            <span class="type">{{ movieData.type_name }}</span>
            <span class="vod-class">
              <span v-for="tag in vod_class" :key="tag">{{ tag }}  /  </span>
            </span>
            <span class="vod-class">{{ movieData.vod_year }}</span>
            <span class="vod-class">{{ movieData.vod_area }}</span>
            <span class="vod-class">{{ movieData.vod_lang ? movieData.vod_lang : "未知" }}</span>
          </div>
        </div>
        <!--导演等信息-->
        <div class="info-person">
          <p>导演：{{ movieData.vod_director }}</p>
          <p>主演： <span v-for="item in personInfo" :key="item">{{ item }} / </span></p>
          <p>上映：{{ movieData.vod_pubdate }} ({{ movieData.vod_area }})</p>
          <p>集数：{{ movieData.vod_remarks }}</p>
          <span class="vod-content">剧情：{{ movieData.vod_content }}</span>
        </div>
        <!--播放按钮-->
        <el-button style="width: 110px;margin-top: 30px" type="warning" round>
          <el-icon size="20">
            <CaretRight/>
          </el-icon>
          立即播放
        </el-button>
      </div>
      <div class="right-img-box">
        <div class="movie-content">
          <div @click="navigation(movieData.vod_id)" :class="{'movie-item':true}"
               @mouseenter="changeFun(movieData.vod_id)"
               @mouseleave="changeFun(0)"
          >
            <div :class="{'movie-item-mask':isMask == movieData.vod_id}"></div>
            <img :src="movieData.vod_pic" style="width: 100%;height: 90%">
            <span> {{ movieData.vod_name }}</span>
          </div>
        </div>
      </div>
    </div>
    <!--在线观看-->
    <div class="url-list-box">
      <div class="tab-source">
        <span style="font-size: 26px">在线观看</span>
        <div class="source">
          <span style="font-size: 12px;color: red">{{ movieData.vod_remarks }}</span>
        </div>
      </div>
      <el-scrollbar :height="urlList.length < 8 ? 50 : urlList.length / 8 * 50"
                    style="margin-top: 20px;background-color: #eaedf1;border-radius: 15px 0 15px 15px;">
        <div class="url-box">
          <div v-for="item in urlList" :key="item.id">{{ item.episode }}</div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
//获取路由里面的query参数
import {useRoute} from "vue-router/dist/vue-router";
import {getMovie} from "@/api/movie";
import {onMounted, reactive, ref} from "vue";
import router from "@/router";

onMounted(async () => {
  await searchMovieData({ids: movieId})
  await FormatPlayUrlList()
})
//路由跳转
const navigation = (id) => {
  router.push({
    name: 'movieDetail',
    params: {
      id
    }
  })
}
//遮罩层
let isMask = ref(0)
const changeFun = (num) => {
  isMask.value = num
}
//影片id
const route = useRoute()
const movieId = route.params.id
//标签
let vod_class = ref([])
//演员信息
let personInfo = ref([])
//搜索数据
const searchMovieData = async (data) => {
  const res = await getMovie(data)
  console.log(res.data.list[0])
  movieData.value = res.data.list[0]
  vod_class.value = movieData.value.vod_class.split(',')
  personInfo.value = movieData.value.vod_actor.split(',')
}
//获取全部播放源数据
let urlList = reactive([])
//处理返回的播放源数据（格式化）
const FormatPlayUrlList = () => {
  let data = movieData.value.vod_play_url
  let arr = []
  let newArr = []
  arr = data.split("#")
  arr.forEach((item, index) => {
    newArr = item.split("$")
    urlList.push({episode: newArr[0], play_url: newArr[1], id: index})
  })
  console.log(urlList)
}
//获取数据
let movieData = ref({})
//视频来源
const getVideoFrom = (string) => {
  if (string === "qq") {

  }
}

</script>

<style lang="scss" scoped>
.movie-detail-container {
  padding: 30px;
  background: #eaedf1;

  .movie-info {
    height: 500px;
    background: white;
    border-radius: 15px;
    box-shadow: 5px 5px 8px gray;
    padding: 30px;

    .left-info {
      float: left;
      width: 80%;
      height: 100%;

      display: flex;
      flex-direction: column;


      .name {
        font-size: 38px;
        font-weight: 700;
      }

      .en {
        font-weight: 700;
      }

      .tag {
        margin: 15px 0;

        .item-tag {


          .type {
            background: #f1d4ae;
            padding: 5px;
            border-radius: 10px;
            margin-right: 15px;
            font-size: 14px;
          }

          .vod-class {
            background: #E5EAF3;
            border-radius: 10px;
            font-size: 14px;
            padding: 5px;
            margin-right: 15px;
          }
        }
      }

      .info-person {
        padding-right: 15px;

        p {
          font-size: 14px;
        }

        .vod-content {
          height: 60px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 14px;
        }
      }
    }

    .right-img-box {
      float: left;

      .movie-content {
        display: flex;
        justify-content: space-around;
        text-align: center;

        .movie-item {
          height: 320px;
          width: 220px;
          border-radius: 5px;
          overflow: hidden;
          margin: 15px 2px;
          box-shadow: 2px 2px 3px #aaaaaa;
          position: relative;


          .movie-item-mask {
            position: absolute;
            height: 320px;
            width: 220px;
            bottom: 0;
            left: 0;
            z-index: 999;
            background: rgba(0, 0, 0, .2) url("../assets/icon/play.png") no-repeat 50% 50%;
            background-size: 30px 30px;

          }
        }

      }
    }
  }

  .url-list-box {
    margin-top: 30px;
    padding: 30px;
    background: white;
    border-radius: 15px;
    position: relative;

    .tab-source {
      display: flex;
      justify-content: space-between;

      .source {
        position: absolute;
        top: 35px;
        right: 30px;
        height: 50px;
        width: 100px;
        background-color: #eaedf1;
        font-size: 14px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: center;

      }
    }

    .url-box {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      margin-left: 20px;


      div {
        background-color: #f7f8f9;
        border-radius: 15px;
        font-size: 14px;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin: 10px 20px;
      }

      div:hover {
        background-color: white;
        color: #ec4141;
        cursor: pointer;
      }
    }
  }
}
</style>
